<template>
  <div class="SettlementRecords">
    <el-card>
      <div class="searchBox">
        <div class="left">
          订单生成日期：
          <el-date-picker
            size="small"
            v-model="timeArr"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="timeOptions"
            value-format="yyyy-MM-dd"
            @change="focusA"
          >
          </el-date-picker>
          <span class="ml-20"></span> 订单状态：
          <el-select v-model="status" size="small" placeholder="请选择">
            <el-option label="不限" value=""> </el-option>
            <el-option label="已完成" value="1"> </el-option>
            <el-option label="等待确认" value="2"> </el-option>
            <el-option label="等待回执" value="3"> </el-option>
            <el-option label="拒绝确认" value="4"> </el-option>
          </el-select>
          <el-button class="btn ml-20" icon="el-icon-search" size="small"
            >搜索</el-button
          >
        </div>
        <div class="right">
          <el-button size="small">导出EXCEL</el-button>
        </div>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%; margin-top: 10px"
        :header-cell-style="{ background: '#f5f7fa' }"
      >
        <template slot="empty">
          <el-empty :image-size="200"></el-empty>
        </template>
        <el-table-column prop="id" label="订单生成时间"> </el-table-column>
        <el-table-column prop="id" label="结算起始时间"> </el-table-column>
        <el-table-column prop="id" label="结算终止时间"> </el-table-column>
        <el-table-column prop="id" label="结算方式"> </el-table-column>
        <el-table-column prop="id" label="分成比例"> </el-table-column>
        <el-table-column prop="id" label="结算税率"> </el-table-column>
        <el-table-column prop="id" label="宝石收益"> </el-table-column>
        <el-table-column prop="id" label="结算金额"> </el-table-column>
        <el-table-column prop="id" label="账单明细">
          <template slot-scope="scope">
            <el-button
              plain
              @click="detail(scope.row)"
              type="success"
              size="mini"
              >账单明细</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="id" label="时间线">
          <template slot-scope="scope">
            <el-button
              plain
              @click="timeLine(scope.row)"
              type="primary"
              size="mini"
              >时间线</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="id" label="状态"> </el-table-column>
      </el-table>
      <br />
      <pagination
        :total="total"
        :page.sync="page"
        :limit.sync="pageSize"
        @pagination="getList"
      />
    </el-card>
    <!-- 账单明细 -->
    <el-dialog title="账单明细" :visible.sync="dialogVisible" width="50%">
      <el-descriptions :column="3" border>
        <el-descriptions-item :span="3" label="时间">
          2011-10-15-2011-11-15
        </el-descriptions-item>
        <el-descriptions-item label="宝石收益总数"> 5000 </el-descriptions-item>
        <el-descriptions-item label="宝石支出总数"> 0 </el-descriptions-item>
        <el-descriptions-item label="宝石实际收益总数">
          5000
        </el-descriptions-item>
      </el-descriptions>
      <el-table
        :data="detailTableData"
        style="width: 100%; margin-top: 10px"
        :header-cell-style="{ background: '#f5f7fa' }"
      >
        <template slot="empty">
          <el-empty :image-size="200"></el-empty>
        </template>
        <el-table-column prop="id" label="时间"> </el-table-column>
        <el-table-column prop="id" label="主播ID"> </el-table-column>
        <el-table-column prop="id" label="主播昵称"> </el-table-column>
        <el-table-column prop="id" label="来源"> </el-table-column>
        <el-table-column prop="id" label="宝石收益数量变更"> </el-table-column>
      </el-table>
      <br />
      <pagination
        :total="detailTotal"
        :page.sync="detailPage"
        :limit.sync="detailPageSize"
        @pagination="detailGetList"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 时间线 -->
    <el-dialog title="时间线" :visible.sync="timeLineDialog" width="30%">
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in timeLineList"
          :key="index"
          :timestamp="activity.timestamp"
        >
          {{ activity.content }}
        </el-timeline-item>
      </el-timeline>

      <span slot="footer" class="dialog-footer">
        <el-button @click="timeLineDialog = false">取 消</el-button>
        <el-button type="primary" @click="timeLineDialog = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
export default {
  components: { Pagination },
  props: ["number", "contact"],
  data() {
    return {
      timeArr: [],
      startDate: "",
      endDate: "",
      status: "",
      timeOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      tableData: [{}, {}],
      total: 0,
      page: 1,
      pageSize: 10,
      dialogVisible: false,
      detailTableData: [],
      detailTotal: 0,
      detailPage: 1,
      detailPageSize: 10,
      timeLineDialog: false,
      timeLineList: [
        {
          content: "生成账单 操作人：张3",
          timestamp: "2018-04-09 ",
        },
        {
          content: "发送账单 操作人：李4",
          timestamp: "2018-04-10  ",
        },
        {
          content: "工会确认 操作人：王5",
          timestamp: "2018-04-11  ",
        },
      ],
    };
  },
  methods: {
    //选着时间
    focusA(time) {
      if (!this.timeArr) {
        this.timeArr = [];
      }
      this.startDate = this.timeArr[0];
      this.endDate = this.timeArr[1];
    },
    //
    getList() {},
    //点击账单明细
    detail(obj) {
      this.dialogVisible = true;
    },
    detailGetList() {},
    //时间线
    timeLine(obj) {
      this.timeLineDialog = true;
    },
  },
};
</script>

<style lang="less" scoped>
.SettlementRecords {
  .ml-20 {
    margin-left: 20px;
  }
  .searchBox {
    display: flex;
    justify-content: space-between;
    .left {
      display: flex;
      align-items: center;
      .el-input {
        width: 300px;
        margin-right: 20px;
      }
    }
  }
}
</style>